<template>
  <div class="company-policy">
    <!-- 我是政策申报-用户信息 -->
		<v-info :showRZ="showRZ"></v-info>
		<!-- 我是政策申报-列表 -->
		<div class="company-policy-content">
			<div class="company-policy-head flexItems">
				<div class="company-policy-head-num flexItems">{{$t('common.company.declared')}}<span>{{count.applyPolicyNum}}</span></div>
				<div class="company-policy-head-num flexItems">{{$t('common.company.totalPerson')}}<span>{{count.applyNum}}</span></div>
				<div class="company-policy-head-num flexItems">{{$t('common.company.cashedPerson')}}<span>{{count.cashInNum}}</span></div>
				<div class="company-policy-head-num flexItems">{{$t('common.company.outstandingPerson')}}<span>{{count.noCashInNum}}</span></div>
			</div>
			<div class="company-policy-table">
				<div class="company-release-table">
					<table>
						<tr>
							<td></td>
							<td class="zmlleft">{{$t('common.company.applicationItems')}}</td>
							<td>
								<span class="zmlchange" @click="bindChange">
									{{$t('common.company.applicationSubmissionTime')}} 
									<i class="el-icon-d-caret" v-if="sort==''"></i>
									<i class="el-icon-caret-bottom" v-else-if="sort=='asc'"></i>
									<i class="el-icon-caret-top" v-else></i>
								</span>
							</td>
							<td>{{$t('common.company.applicants')}}</td>
							<td>{{$t('common.company.cashResult')}}</td>
							<td>{{$t('common.company.submitResult')}}</td>
						</tr>
						<tr v-for="item in tableData" :key="item.id">
							<td><i class="el-icon-s-operation font20 h99"></i></td>
							<td class="color1 zmlleft"><router-link class="color1" :to="'/vip/c_policy_declaration_detail?id='+item.id">{{item.title}}</router-link></td>
							<td>{{item.createTime}}</td>
							<td>{{item.cashInNum||0}}人</td>
							<td>
								<span v-if="item.status==0">{{$t('common.status.dfabu')}}</span>
								<span v-if="item.status==1">{{$t('common.status.yfabu')}}</span>
								<span v-if="item.status==2">{{$t('common.status.yxiajia')}}</span>
							</td>
							<td>{{item.applyStatus}}</td>
						</tr>
					</table>
				</div>
				<div class="shenbao-page flexCenter" v-if="total > 0">
					<el-pagination background
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-size="pageSize"
						layout="prev, pager, next, total, jumper"
						:total="total">
					</el-pagination>
				</div>

				<div class="tipBox" v-if="total == 0">{{$t('news.listTip')}}</div>

			</div>
			
		</div>
	
  </div>
</template>
<script>	
import {ajaxAdd,ajax} from '@/utils/js.js'
import {queryPolicy,queryPolicyCount} from '@/services/api.js'
import info from '@/components/info.vue'
export default {
	components:{
		'v-info':info
	},
	data() {
		return {
			showRZ:true,  //立即认证按钮显示
			tableData: [],		//申报列表
			sort: "", 			//desc=降序 asc=升序
			currentPage: 1, 	//当前页
			pageSize: 10,  		//一页几条
			total: 0,			//总条数
			count:{},
		}
	},
	methods:{
		// 切换排序
		bindChange(){
			if(this.sort == ""){
				this.sort = "asc"
				
			}else if(this.sort == "asc"){
				this.sort = "desc"
				
			}else if(this.sort == "desc"){
				this.sort = ""
			}
		},
		// 页数改变时触发
		handleCurrentChange(val){
			this.currentPage = val
			setTimeout(()=>{                                
							this.getSbList()
			},200)
		},
                
    // 获取申报列表
		getSbList(){
			let data = {
				"cashIn": "",
				"enterpriseId": this.$store.state.userInfo.id,
				"pageNo": this.currentPage,
				"pageSize": this.pageSize,
				"subjectType": "2"
			}
			ajaxAdd(this,queryPolicy,data,res=>{
				console.log(res.data)
				this.tableData = res.data.records
				this.total = res.data.total
				this.pageSize = res.data.size
			},err=>{
				console.log(err)
			})
		},
		
		
		// 运行所有函数
		content(){
			//企业信息
			this.getSbList()
			ajax(this,queryPolicyCount,{enterpriseId:this.$store.state.userInfo.id},res=>{
				this.count = res.data
				
			},err=>{
				
			})
		}
	},
	mounted() {
		this.content()
		
	},
	watch:{
		'$i18n.locale'(){
			this.content()
		},
	},
}
</script>
<style lang="scss">
.company-policy{
	.company-info-a-name>a{
		color: #0F54BC;
	}
	.company-policy-content{
		width: 100%;
		min-height: 690px;
		background-color: #fff;
		margin-top: 20px;
		padding: 0 20px 50px;
		.company-policy-head{
			height: 90px;
			.company-policy-head-num{
				font-size: 16px;
				margin: 0 30px;
				span{
					margin-left: 10px;
					color: #FF7452;
					font-size: 24px;
				}
			}
		}
		.company-release-table{
			// margin-top: 12px;
			table{
				width: 100%;
				text-align: center;
				color: #666;
				tr{
					border: 1px solid #EDEDED;
					height: 50px;
					.cz{
						margin: 0 10px;
						cursor: pointer;
					}
				}
				tr:nth-of-type(1){
					background-color: #F2F6FE;
					height: 50px;
					td:nth-of-type(1){
						text-align: left;
						padding-left: 32px;
						max-width: 250px;
					}
				}
			}
			.zmlchange{
				cursor: pointer;
				user-select: none;
			}
			.zmlleft{
				text-align: left;
				padding-left: 23px;
				overflow: hidden;
				white-space: nowrap;
				max-width: 100px;
				text-overflow: ellipsis;
			}
		}
		.shenbao-page{
			padding: 30px 0 0;
		}
	}
}

</style>